<template>
  <view class="page">
	<view class="header">
	  <view class="right">
	    <img class="logo" height="35" src="@/static/logo.png" />
	  </view>
	  <view class="left">
	    <img src="http://demo.cyyyds.cn/uploads/20250114/qr.png" class="qr" />
	  </view>
	</view> 
	<view>
		<image-swiper :images="imageList"></image-swiper>
	</view>
	<view class="entry-row">
		<view class="entry">
			<img src="http://demo.cyyyds.cn/uploads/20250114/e0.png" class="entry-icon" @click="jumpto(1)" />
			<text class="entry-text">参观预约</text>
		</view>
<!-- 		<view class="entry">
			<img src="http://demo.cyyyds.cn/uploads/20250114/e1.png" class="entry-icon" @click="jumpto(2)" />
			<text class="entry-text">讲解预约</text>
		</view> -->
		<view class="entry">
			<img src="http://demo.cyyyds.cn/uploads/20250114/e2.png" class="entry-icon" @click="jumpto(3)" />
			<text class="entry-text">研学活动</text>
		</view>
		<view class="entry">
			<img src="http://demo.cyyyds.cn/uploads/20250114/e3.png" class="entry-icon" @click="jumpto(4)" />
			<text class="entry-text">大讲堂</text>
		</view>
		<view class="entry">
			<img src="http://demo.cyyyds.cn/uploads/20250114/e4.png" class="entry-icon" @click="jumpto(5)" />
			<text class="entry-text">其他活动</text>
		</view>
	</view>
	<view class="show">
		<view class="title">精彩展览</view>
		<view class="more">更多 &gt;</view>
		<view class="one" @click="gotopage()">
			<view class="left">
				<view class="h1">第一王朝（一展厅）</view>
				<view class="h2">常设展览</view>
				<view class="h3">立刻了解 &gt;</view>
			</view>
			<view class="right">
				<image src="http://demo.cyyyds.cn/uploads/20250114/zl1.jpg"></image>
			</view>
		</view>
		<view class="one" @click="gotopage()">
			<view class="left">
				<view class="h1">国之大事（二展厅）</view>
				<view class="h2">常设展览</view>
				<view class="h3">立刻了解 &gt;</view>
			</view>
			<view class="right">
				<image src="http://demo.cyyyds.cn/uploads/20250114/zl1.jpg"></image>
			</view>
		</view>
		<view class="one" @click="gotopage()">
			<view class="left">
				<view class="h1">建中立极（三展厅）</view>
				<view class="h2">常设展览</view>
				<view class="h3">立刻了解 &gt;</view>
			</view>
			<view class="right">
				<image src="http://demo.cyyyds.cn/uploads/20250114/zl1.jpg"></image>
			</view>
		</view>
		<view class="one" @click="gotopage()">
			<view class="left">
				<view class="h1">厥土生民（四展厅）</view>
				<view class="h2">常设展览</view>
				<view class="h3">立刻了解 &gt;</view>
			</view>
			<view class="right">
				<image src="http://demo.cyyyds.cn/uploads/20250114/zl1.jpg"></image>
			</view>
		</view>
	</view>
  </view>

</template>

<script>
  import ImageSwiper from '@/components/rck/image-swiper.vue'
  export default {
    components:{
      ImageSwiper
    },
    data() {
      return {
        imageList: [
          'http://demo.cyyyds.cn/uploads/20250114/1.jpg?v=2',
          'http://demo.cyyyds.cn/uploads/20250114/2.jpg?v=2',
          'http://demo.cyyyds.cn/uploads/20250114/3.jpg?v=2',
          'http://demo.cyyyds.cn/uploads/20250114/4.jpg?v=2',
          'http://demo.cyyyds.cn/uploads/20250114/5.jpg?v=2'
        ]
      }
    },
	methods:{
		gotopage(){
			uni.navigateTo({
				url:"/pages/work/introduction"
			})
		},
		jumpto(p){
			if(p==1){
				uni.navigateTo({
					url:"/pages/appointment/reserve"
				})
			}else if(p==3){
				uni.navigateTo({
					url:"/pages/appointment/study"
				})
			}else if(p==4){
				uni.navigateTo({
					url:"/pages/appointment/course"
				})
			}
		}
	},
    onLoad: function() {
    }
  }
</script>

<style lang="scss">
.page{
	background-color: #f5f4ee;
	height: 100vh;
}
.header{

  height: 50px;background-color:#721b28;
  
  .left{
  	width:25%; 
  	float:right;
	text-align: right;
	.qr{
		margin-top:30upx;
		margin-right:30upx;
		width: 40upx;
		height: 40upx;
	}
  }
  .right{
  	width: 50%;
  	float:left;
	margin-left:25%;
  	img{
  		margin-top:7px;
  	}
  }
  
}

.entry-row {
  padding:5%;
  display: flex;
  justify-content: space-between;
  width: 90%;
  margin-bottom: 20px;

  .entry {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 20%;
    .entry-icon {
      width: 50px;
      height: 50px;
      margin-bottom: 10px;
    }
    
    .entry-text {
      font-size: 25upx;
    }
  }
}
.show{
	padding: 0upx 30upx;
	background-color: #f5f4ee;
	.title{
		float:left;
		width:50%;
		font-size:30upx;
		font-weight:bold;
		height:60upx;
	}
	.more{
		float:right;
		width:30%;
		height:60upx;
		text-align:right;
        font-size: 24upx;
		color:#999;
	}
	.one{
		clear:both;
		border-radius: 30upx;
		background: #fffdf6;
		height: 240upx;
		margin-bottom: 20upx;
		.left{
			float: left;
			width: 300upx;
			color: #443819;
			.h1{
				margin-left:30upx;
				margin-top: 30upx;
				font-size: 27upx;
				font-weight: bold;
			}
			.h2{
				margin-left:30upx;
				margin-top: 20upx;
				font-size: 15upx;
			}
			.h3{
				margin-left:30upx;
				margin-top: 70upx;
				font-size: 20upx;
			}
		}
		.right{
			float: right;
			image{
				margin: 20upx;
				border-radius: 10upx;
				width: 300upx;
				height: 200upx;
			}
		}
	}
}
</style>
